<template>
    <div class="view-container">
      <div class="address-wp">
        <template v-if="list.length > 0">
          <address-card v-for="(item, index) in list" :key="item.id" :address="item" @success="success"></address-card>
        </template>

        <template v-if="list.length <=0 && !newAddress">
           <empty>暂无地址信息</empty>
        </template>

        <!--添加-->
        <div class="insert-wp">
          <el-button v-if="!newAddress" :plain="true" type="info" icon="plus" style="width: 100%;" @click.stop.prevent="addShow">添加</el-button>
          <address-card v-if="newAddress" :is-new="true" @cancel="addHide" @success="success"></address-card>
        </div>
      </div>

      <div v-if="list.length > 0 && total>0" class="pagination-wrapper">
        <el-pagination
            layout="total,prev, pager, next"
            :total="total"
            :page-size="pageSize"
            @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
</template>

<script>
  import Empty from '@/components/Empty';
  import addressCard from './components/addressCard.vue';

  import {getContacts} from '@/api/user';

  export default {
      name: 'userAddress',
      components:{
        'address-card':addressCard,
        'empty':Empty,
      },
      data ()
      {
          return {
            total:0,
            pageSize:5,
            currentPage:1,
            list:[],
            newAddress:false, //是否显示新地址添加组建
          }
      },
      mounted()
      {
         this.getList();
      },
      methods: {
        getList() //获取地址列表
        {
          let params = {
            pageNum:this.currentPage,
            pageSize:this.pageSize,
          };

          getContacts(params).then((resp)=>{
            let data = resp.data;
            this.list = data.list;
            this.total = data.total;

          }).catch((err)=>{
            //console.log(err);
          })
        },
        handleCurrentChange(val) //currentPage变动
        {
          this.currentPage=val;
          this.getList();
        },
        addShow() //添加地址
        {
          this.newAddress = true;
        },
        addHide()
        {
          this.newAddress = false;
        },
        success() //添加或修改成功
        {
          this.addHide();
          this.getList();
        }
      }
    }
</script>

<style lang="scss" scoped>
  .address-wp
  {
    width: 600px;

    .insert-wp
    {
    }
  }

  .pagination-wrapper
  {
    margin: 30px 0;
  }

</style>
